import { Grid } from '@arco-design/web-react';
import React, { ReactNode } from 'react';
const Row = Grid.Row;
interface Props {
  className?: string;
  contentClassName?: string;
  title?: string;
  subTitle?: ReactNode;
  showTitle?: boolean;
  children?: ReactNode;
}

export default function DetailCard({
  className,
  title,
  subTitle,
  contentClassName,
  showTitle = true,
  children,
}: Props) {
  return (
    <div className={`detail-card ml-5 mr-5 ${className}`}>
      {showTitle && (
        <div className="detail-card-title">
          <div className="line-dot" />
          <div className="font-16">
            {title}
            {subTitle}
          </div>
        </div>
      )}
      <Row className={`pl-10 pt-10 pr-10 ${contentClassName}`}>{children}</Row>
    </div>
  );
}
